Using the Viewport nodes

Use the Viewport nodes to set the size of a render target surface onto which content is projected.

Viewport 2D is a special node because it can render both 2D objects, such as Image, Page, Button 2D, and a Scene, which is a 3D object. When you create a new Kanzi Studio project, the project has a Viewport 2D with a Scene that contains a Camera and a Directional Light.

Creating a Viewport 2D node

To create a Viewport 2D node:

1. In the Project press Alt and right-click a 2D node where you want to create a Viewport 2D node and select Viewport 2D.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
2. Add content to the Viewport 2D node you created.
   For example:
   • In the Project press Alt and right-click the Viewport 2D and select Scene.
     Kanzi Studio creates a Scene that contains a Camera and a Directional Light.
   • In the Project press Alt and right-click Prefabs, select Scene, and drag that Scene to the Viewport 2D node.
     Kanzi Studio instantiates the Scene as a prefab in the Viewport 2D node.

Controlling how Kanzi renders a Viewport 2D node

You can control how Kanzi renders a Viewport 2D node with the Foreground Hint property:

• None tells Kanzi to render the background brush after rendering the Viewport 2D node. Use it when the content of the Viewport 2D node is opaque.
• Translucent tells Kanzi to render the background brush before the content of the Viewport 2D node. Use it when the content in the Viewport 2D node is alpha blended.
• Occluding tells Kanzi not to render the background brush. Use it when the entire Viewport 2D node is filled with 3D content.

Setting the background of a Viewport 2D node

You can control how Kanzi renders a Viewport 2D node. See Controlling how Kanzi renders a Viewport 2D node.

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background.

To set the background:

1. Create a Color Brush, a Texture Brush, or a Material Brush. See Using brushes.
   
2. In the Project select the 2D node the background of which you want to paint.
   Note that you can set only the background of 2D nodes.
3. In the Properties add the Background Brush property and select the brush you created in the first step.
   

Using the Viewport 2D node in the API

To create a Viewport 2D object, attach it to the RootPage, and add to it either a Scene or 2D content:

// Create a Viewport 2D named Viewport 2D and add it to the RootPage.
Viewport2DSharedPtr viewport2d = Viewport2D::create(domain, "Viewport 2D");
rootLayer->addChild(viewport2d);

// To render 3D objects in a Viewport 2D you need to add a Scene to the Viewport 2D.
// Create a Scene named Scene and add it to the Viewport 2D.
SceneSharedPtr sceneNode = Scene::create(domain, "Scene for 3D objects");
viewport2d->setScene(sceneNode);

// Create a Camera named Camera and add it to the Scene.
CameraSharedPtr camera = Camera::create(domain, "Camera");
sceneNode->addChild(camera);

// Create a Point Light named Point light and add it to the Scene.
LightSharedPtr light = Light::createPoint(domain, "Point light");
sceneNode->addChild(light);

// Create a Box mesh named Box and add it to the Scene.
Model3DSharedPtr box = Model3D::createCube(domain, "Box", 1.0f, ThemeBlue);
sceneNode->addChild(box);

For details, see the API reference.

See also

Using the Scene node

Preview

Using prefabs

Material types and materials

Creating textured materials

Open topic with navigation